<template>
      <div>
            <!-- 顶部 begin -->

            <div class="shopBox shopDura" @click="showShop">
                  <div class="shopWapper">
                        <!-- 顶部 满减部分 begin -->
                  <div class="shopTopBox">
                        <img :src="goodsReduce.shopImg" alt="" class="shopTopLogo">
                        <div class="shopTrans">
                              <div class="shopTopName">{{goodsReduce.shopName}}
                                    <i class="collect"></i>
                              </div>
                              <div class="shopTopTran">{{goodsReduce.dada}} {{goodsReduce.times}}</div>
                              <div class="shopTopBegin">{{goodsReduce.translate}}</div>
                         </div>
                        <ul class="topSticks topSticksHide">
                              <li v-for="list in goodsReduce.sticks" :key="list.id" class="topStickList"><span class="shopTopReduce">{{list.stick}}</span> {{list.des}}</li>
                        </ul>
                        <div class="topMoreStick" @click="sticksRed">点击
                              <i class="shopTopCollect shopTopMore"></i>
                        </div>
                        <div><span class="post">公告 </span> {{goodsReduce.post}}</div>
                        <div class="activeCount">{{goodsReduce.sticks.length}}个活动</div>
                  </div>
                  <!-- 顶部 满减部分 end -->

                  <!-- 顶部优惠券部分 begin -->
                  <div class="shopSales">
                        <h2 class="shoph2">店铺优惠券</h2>
                  </div>
                  <ul class="getSticksBox">
                        <li v-for="list in salesSticks" :key="list.id" class="getSticksList">
                              <div class="stickOne">{{list.sale}}<b class="zhe">{{list.choose}}</b></div>
                              <div class="stickTwo">
                                    <h2 class="title1">{{list.title1}}</h2>
                                    <h2 class="title2">{{list.title2}}</h2>
                                    <h2 class="title2">{{list.title3}}</h2>
                              </div>
                              <div><img src="/static/img/store.png" alt="" class="stitckPin"></div>
                              <div class="stickThree"><span class="getSticksCart">{{list.getStick}}</span></div>
                        </li>
                  </ul>
                  <!-- 顶部优惠券部分 end -->

                  <!-- 顶部店铺评价 begin -->
                  <div class="shopSales">
                        <h2 class="shoph2">店铺评价</h2>
                  </div>
                  <div class="appraiseWrap">
                        <div class="appraiseTitle">
                              <div class="appraiseTotal appraiseLeft">
                                    <h1 class="appraiseScore">{{appraise.score}}</h1>
                                    <h2 class="appraiseScoreText">{{appraise.scoreT}}</h2>
                              </div>
                              <div class="appraiseTotal">
                                    <h1 class="appraiseScore">{{appraise.total}}</h1>
                                    <h2>{{appraise.totalT}}</h2>
                              </div>
                        </div>
                        <div class="appraiseContent">
                              <div><img :src="appraise.userImg" class="appraisePic"></div>
                              <div class="appraiseInfo">
                                    <h3 class="appraiseUser">{{appraise.userName}}<span class="appraiseTime">{{appraise.time}}</span></h3>
                                    <p class="appraiseGrade">{{appraise.grade}}</p>
                                    <div class="commentBox">
                                          <div><img :src="appraise.service" alt="" class="commentImg"></div>
                                          <p class="commentCon">{{appraise.comment}}</p>
                                    </div>
                                    <div class="commentBox">
                                          <div><div class="commentZan"></div></div>
                                          <p><span v-for="words in appraise.word1" :key="words.id" class="commentBorder">{{words.word}}</span></p>
                                    </div>
                              </div>
                        </div>
                        <div class="appraiseMore"><p class="appraiseMoreIcon">{{appraise.more}}</p></div>
                  </div>
                  <!-- 顶部店铺评价 end -->

                  <!-- 顶部店铺信息 begin -->
                  <div class="shopSales">
                        <h2 class="shoph2">店铺信息</h2>
                  </div>
                  <div class="appraiseWrap">
                        <div class="forteen">
                              <img :src="sellerInfo.dayImg" class="forteenImg">
                              <div class="forteenIcon">{{sellerInfo.daySer}}</div>
                        </div>
                        <ul class="sellInfoBox">
                              <li class="sellerList">{{sellerInfo.desCount}}{{sellerInfo.count}}</li>
                              <li class="sellerList">{{sellerInfo.decSigel}}{{sellerInfo.sigel}}</li>
                              <li class="sellerList">{{sellerInfo.attention}}</li>
                              <li class="sellerList">{{sellerInfo.time}}</li>
                              <li class="sellerList">{{sellerInfo.place}}</li>
                              <li class="sellerList">{{sellerInfo.phone}}<span>{{sellerInfo.number1}}</span></li>
                        </ul>
                        <div class="sellerExper">{{sellerInfo.seller}}<i class="sellerExperImg"></i></div>
                        <div class="report">{{sellerInfo.server}}<span class="reportPay">{{sellerInfo.max}}</span></div>
                  </div>
                  <!-- 顶部店铺信息 end -->  
            </div>
            </div>
            <!-- 顶部的页脚部分 begin -->
            <div class="shopFooter displayNone" @click="hideShop"><i class="continueShop"></i>点击继续购物</div>
            <!-- 顶部的页脚部分 end -->
            <!-- 顶部 end -->

            <!-- 首页部分 begin-->
            <div class="homeSection">
                  <!-- 首页搜索框begin -->
                  <div class="searchGoodsBox">
                  <div class="searchGoods"><span class="searchPla">搜索店内商品</span></div>
                  </div>
                  <!-- 首页搜索框end -->
                  <!-- 首页商品展示begin -->
                  <div class="goodsListsBox">
                  <div class="leftGoodsBox">
                        <div v-for="list in goodsList" :key="list.id">
                              <p class="shopListsP" @click="showChildList">{{list.title}}</p>
                              <div style="display:none">
                                    <div v-for="child in list.children" :key="child.id" class="shopListC" @click="showGoods" :ajax="true">{{child.ctitle}}</div>
                              </div>
                        </div>
                  </div>
                  <div class="goodsTitle">{{shopGoods.title}}</div>
                  <div class="rightGoodsBox"> 
                       <div>
                             <div v-for="list in shopGoods.data" :key="list.id" class="goodsBox">
                                   <div><router-link to="/details"><img :src="list.imgsrc" alt="" class="goodsImg"></router-link></div>
                                   <div>
                                         <h2 class="goodsTitle1">{{list.title1}}</h2>
                                         <p class="goodsTitle2">{{list.salesCount}}</p>
                                         <h3 v-show="list.type!=''" class="goodsSalesType" :class="list.type=='直降'?'goodsRed':'goodsSec'">{{list.type}}</h3>
                                         <span class="goodsPrice">¥<i class="goodsPriceNum">{{list.price}}</i></span>
                                         <span v-if="list.type=='秒杀'" class="goodsPricePre">¥<i>{{list.prePrice}}</i></span>
                                   </div>
                                   <div class="addReduce2">
                                         <template v-if="list.id in $root.cart[shopId]">
                                                <span class="goodsOper goodsReds" @click="goodsSub(list)"></span>
                                                <span class="goodsOper goodsNum">{{list.num}}</span>
                                         </template>
                                         <span class="goodsOper goodsAdd" @click="goodsAdd(list)"></span>
                                   </div>
                             </div>
                             <div class="lookOtherBox"><span class="lookOther">去看看其他分类吧</span></div>
                       </div>
                  </div>
            </div>
            <!-- 首页商品展示 end -->

            <!-- 页脚购物车部分 begin -->
            <div class="cartBox">
                  <cart class="cartGoodsBox" :shopId="shopId" style="display:none" :class="Object.keys($root.cart[shopId]).length==0?'displayNone':''"></cart>
                  <div class="cartImg" :class="totalCount>0?'cartImg2':''" @click="showCart">
                        <i class="cartBadge" v-show="totalCount>0">{{totalCount}}</i>
                  </div>
                  <div class="cartText" v-show="Object.keys($root.cart[shopId]).length==0">购物车是空的</div>
                  <div class="cartText cartText2" v-show="Object.keys($root.cart[shopId]).length!=0">¥ {{selectGoods}}</div>
                  <div class="cartPay" :class="Object.keys($root.cart[shopId]).length==0?'':'cartPay2'">去结算</div>
            </div>
            <!-- 页脚购物车部分 end -->  
            <!-- 首页部分 end-->
            </div>

            <!-- 购物车的遮罩层部分 begin -->
            <div class="cartCover"></div>
            <!-- 购物车的遮罩层部分 end -->
             <!-- 快捷导航 begin -->
            <div class="quickNavBox bottom" @click="showHide">
                  <div class="quickNavList displayNone">
                        <router-link to="/index" class="navItem nav1">首页</router-link>
                        <router-link to="/index/list" class="navItem nav2">分类</router-link>
                        <router-link to="/index/cart" class="navItem nav3">购物车</router-link>
                        <router-link to="/index/order" class="navItem nav4">订单</router-link>
                        <router-link to="/index/mine" class="navItem nav5">我的</router-link>
                        <i class="navIc"></i>
                  </div>
            </div>
            <!-- 快捷导航 end -->
      </div>
</template>
<script>
export default {
  data() {
    return {
      goodsReduce: {},
      salesSticks:[],
      appraise:{},
      sellerInfo:{},
      goodsList:[],
      shopGoods:{},
      shopId:this.shopInfo.id,
    };
  },
  props: ["shopInfo"],
  methods: {
    //头部满减请求方法
    getReduce() {
      this.jq.get(this.apiurl + "/shop/reduce").done(result => {
        if (result.error == 0) {
          this.goodsReduce = result.data;
        }
      });
    },
      // 头部优惠券请求方法    
    getSalesSticks() {
      this.jq.get(this.apiurl + "/shop/sticks").done(result => {
        if (result.error == 0) {
          this.salesSticks = result.data;
        }
      });
    },
      // 头部用户评价请求方法
      getAppraise() {
      this.jq.get(this.apiurl + "/shop/appraise").done(result => {
        if (result.error == 0) {
          this.appraise = result.data;
        }
      });
    },
      //  头部店铺信息请求方法   
    getShopInfo(){
        this.jq.get(this.apiurl + "/shop/info").done(result => {
        if (result.error == 0) {
          this.sellerInfo = result.data;
        }
      });  
    },
      // 商品列表方法    
     getShopList(){
           this.jq.get(this.apiurl+'/shop/lists').done(result=>{
                 if(result.error==0){
                       this.goodsList=result.data
                 }
           })
      },
      // 商品详情请求方式
      getShopGoods(){
            this.jq.get(this.apiurl+'/shop/goods').done(result=>{
                 if(result.error==0){
                       this.shopGoods=result.data
                 }
           })
      },
      //隐藏头部方法     
      hideShop(){
            this.jq('.shopBox').addClass('shopDura')
            this.jq('.activeCount,.cartBox').removeClass('displayNone')
            this.jq('.shopFooter').addClass('displayNone')
      },
      // 展示头部方法
      showShop(){
            this.jq('.shopBox').removeClass('shopDura')
            this.jq('.activeCount,.cartBox').addClass('displayNone')
            this.jq('.shopFooter').removeClass('displayNone')
            
      },
      // 头部满减部分显示或隐藏方法
      sticksRed(){
            this.jq(event.target).children().toggleClass('shopTopMore')
            this.jq(event.target).prev().toggleClass('topSticksHide')
      },
      // 首页左侧子菜单的显示或隐藏
      showChildList(){
            // 目标对象的子菜单展现,其他隐藏
            this.jq('.shopListsP').not(event.target).next().css('display','none')
            // 移除其他的选中样式
            this.jq('.shopListsP').not(event.target).removeClass('active')
            this.jq('.shopListsP').removeClass('activeP')
            // 设置子菜单的动效
            this.jq(event.target).next().slideToggle('200')
            // 为目标对象添加选中状态
            this.jq(event.target).addClass('activeP')
            // 当子菜单收起时,目标对象添加样式
            if(this.jq(event.target).next().height()>2){
                  var et=event.target
                  var _this=this
                  setTimeout(function(){
                       _this.jq(et).addClass('active')
                  },200)
            }else{
                  this.jq(event.target).removeClass('active')
            }
            this.jq(event.target).next().children().removeClass('active')
            if(this.jq(event.target).next().height()<1){
                  // 触发一次子菜单的click事件
                   this.jq(event.target).next().children().first().trigger('click')
            }
      },
      // 左侧菜单点击的css样式
      showGoods(){
            this.jq('.shopListC').not(event.target).prop('ajax',true)
            this.jq('.shopListC').removeClass('active')
            this.jq(event.target).addClass('active')
            if(this.jq(event.target).prop('ajax')){
                  this.getShopGoods()
                  this.jq(event.target).prop('ajax',false)
            }
            
      },
      // 商品减少方法
      goodsSub(goods){
            if(goods.num>1){
                  goods.num--
            }else{
                  goods.num=0
                  this.$delete(this.$root.cart[this.shopId],goods.id)
            }
                  
      },
      // 商品增加方法
      goodsAdd(goods){
            if(goods.id in this.$root.cart[this.shopId]){
                  if(goods.num<goods.store){
                        goods.num++
                  }
            }else{
                  goods.num++
                  this.$set(this.$root.cart[this.shopId],goods.id,goods)
            }
      },
      // 快捷导航部分的子菜单 显示或消失
      showHide(){
            this.jq('.quickNavList').toggleClass('displayNone')
      },
      // 展示购物车方法
      showCart(){
            if(Object.keys(this.$root.cart[this.shopId]).length==0){return}
            this.jq('.cartGoodsBox').slideToggle('500')
            this.jq('.cartCover').css('display','block')
            this.jq(event.target).css('display','none')
            this.jq('.cartText2').animate({
                  left:'1rem'
            },500)
      }
  },
  created() {
      //调用头部满减请求方法
      this.getReduce();
            //调用优惠券方法  
      this.getSalesSticks();
            //调用用户评论方法     
      this.getAppraise();
            //调用店铺信息方法     
      this.getShopInfo();
            // 调用商品列表方法    
      this.getShopList();
            //  调用商品详情请求方法   
      this.getShopGoods()
      // 初始化购物车
      this.$set(this.$root.cart,this.shopId,{})
  },
  computed:{
        selectGoods:function(){
              var sum=0
              for(var item in this.$root.cart[this.shopId]){
                    if(this.$root.cart[this.shopId][item].check){
                           sum+=Number(this.$root.cart[this.shopId][item].num)*Number(this.$root.cart[this.shopId][item].price)
                    }
              }
              return Math.round(sum*100)/100
        },
        totalCount(){
              var num=0;
              for(var item in this.$root.cart[this.shopId]){
                    num+=Number(this.$root.cart[this.shopId][item].num)
              }
              return num
        }
  },
  watch:{
        goodsList:function(){
               this.$nextTick(function(){
                         this.jq('.shopListsP').first().trigger('click')
                  })
        }
  }
}

</script>
<style>
/* 设置最外面div的背景*/ 
.shopBox{
      position: relative;
      overflow: hidden;
      z-index: 100;
}
.shopDura{
      height: 108px;
      transition-duration: 1s;
}
.shopWapper {
  background: url("/static/img/shopbg.jpg") 0 0 no-repeat;
  background-size: cover;
  overflow: hidden;
  padding-bottom: 5rem;
}
.shopTopBox {
  width: 100%;
  box-sizing: border-box;
  padding: 1rem 1rem 0.5rem 1rem;
  color: #fff;
  position: relative;
}
/*顶部shop 满减部分 begin*/
.shopTopLogo {
  display: block;
  border-radius: 4px;
  width: 4.4rem;
  border: 1px solid rgba(255, 255, 255, 0.8);
  background-color: #fff;
  float: left;
}
.shopTrans {
  float: left;
  margin-left: 0.8rem;
}
.shopTopName {
  line-height: 25px;
  font-size: 18px;
  line-height: 25px;
}
.collect{
      display: inline-block;
      width: 1.7rem;
      height: 1.5rem;
      background: url('/static/img/focus.png') no-repeat 0 -1px;
      background-size: 5rem auto;
      margin-left: 13.5rem;
}
.activeCount{
      position:absolute;
      right:1rem;
      top:7rem;
      background: url('/static/img/down.png') no-repeat right center;
      background-size: 0.8rem auto;
      padding-right: 1rem;
}

.shopTopTran,
.shopTopBegin {
  font-size: 10px;
}
.topSticks{
      clear: both;
      width: 100%;
      margin-top: 6rem;
      overflow: hidden;
}
.topSticksHide{
      height: 120px;
}
.topStickList{
      margin-bottom: 0.7rem;
}
.shopTopReduce{
      padding: 0 2px;
      margin-right: 4px;
      border-radius: 2px;
      color: #ffffff;
      height: 14px;
      line-height: 14px;
      background: #5FBC65
}
.post{
      display: inline-block;
      color: #333333;
      background-color: #fff;
      font-size: 10px;
      border-radius: 2px;
      margin-top:1rem;
}
.topMoreStick{
      position:absolute;
      bottom: 2.5rem;
      right:1rem;
      font-size: 11px;
      padding-left: 6px;
      line-height: 19px;
      color: #FFF;
      background-color: rgba(0,0,0,0.5);
      border-radius: 2px;
      padding-right: 0.5rem;
}
.shopTopCollect{
      display: inline-block;
      width:1rem;
      height:0.7rem;
      background:url('/static/img/shoptop.png') no-repeat;
      background-position: -355px -302px 
}
.shopTopMore{
      background-position: -302px -306px;
}
/*顶部shop 满减 end*/ 

/* 顶部优惠券 begin*/

/*优惠券标题部分*/ 
.shopSales{
      position: relative;
      margin-bottom: 20px;
      margin-top: 0.5rem;
}
.shoph2{
      position: relative;
      width: 32%;
      margin: 0 auto;
      font-size: 15px;
      line-height: 20px;
      color: #FFF;
      text-align: center;
}
.shopSales:before{
      content: '';
      position: absolute;
      top: 1rem;
      left: 1rem;
      right: 64%;
      border-top: 1px solid rgba(255,255,255,0.4);
} 
.shopSales:after{
      content: '';
      position: absolute;
      top: 1rem;
      right: 1rem;
      left: 64%;
      border-top: 1px solid rgba(255,255,255,0.4);
}
/*优惠券主体部分*/ 
.getSticksBox{
      box-sizing: border-box;
      padding: 0 1.5rem 0 1.5rem;
      margin-bottom: 2.5rem;
}
.getSticksList{
      display: flex;
      height: 70px;
      margin: 9px 0;
      border-radius: 5px;
      overflow: hidden;
      border-left: 3px solid #ff5757;
      box-sizing: border-box;
}
.stickOne{
      width: 17%;
      border-top:1px solid #ff9d9d;
      border-bottom:1px solid #ff9d9d;
      background: white;
      color:#ff4f64;
      font-size: 20px;
      text-align: center;
      line-height: 68px;
}
.zhe{
      font-weight: normal;
      font-size: 15px;
}
.stickTwo{
      width: 65%;
      border-top:1px solid #ff9d9d;
      border-bottom:1px solid #ff9d9d;
      background: white;
}
.title1{
      font-size:14px;
      margin-bottom: 0.3rem;
      margin-top: 0.3rem;
      color:#333
}
.title2{
      color:#666;
      font-size: 11px;
      margin-bottom: 0.25rem;
}
.stitckPin{
      height: 70px;
}
.stickThree{
      width: 15%;
      border-top:1px solid #ff9d9d;
      border-bottom:1px solid #ff9d9d;
      border-right:1px solid #ff9d9d;
      background: white;
      text-align: center;
      line-height: 68px;
      font-size: 13px;
}
.getSticksCart{
      color: #fefffe;
      background-color: #ff5757;
      border-radius: 12px;
      padding: 0.2rem 1rem;
}
/*顶部店铺优惠券end*/ 

/*顶部店铺评价 begin*/ 
.appraiseWrap{
      background: rgba(255,255,255,0.1);
      box-sizing: border-box;
      margin: 0 1rem 2.5rem 1rem;
      padding:0 0.8rem;
      border-radius: 3px;
}
/*店铺评论头部*/ 
.appraiseTitle{
      box-sizing: border-box;
      padding: 1.3rem 0;
      color: #fff;
      height: 7rem;
      display: flex;
      border-bottom: 1px dashed rgba(236,236,236,0.5);
}
.appraiseLeft{
      border-right: 1px solid rgba(232,232,232,0.4); 
}
.appraiseTotal{
      width: 50%;
      text-align: center;
      box-sizing: border-box;
}
.appraiseScore{
      height: 3rem;
      line-height: 3rem;
      font-weight: bold;
      font-size: 2.3rem;
}
/*店铺评论内容*/ 
.appraiseContent{
      padding: 1.3rem 0;
      display: flex;
      border-bottom: 1px dashed rgba(236,236,236,0.7)
}
.appraisePic{
      width: 3rem;
      border-radius: 1.5rem;
}
.appraiseInfo{
      box-sizing: border-box;
      padding-left: 0.6rem;
}
.appraiseUser{
      color: white;
      font-size: 14px;
}
.appraiseTime{
      margin-left: 14.5rem;
      font-size: 1rem;
}
.appraiseGrade{
      font-size:9px;
      color:orange
}
.commentBox{
      display: flex;
      margin: 1rem 0
}
.commentImg{
      width: 1.1rem;
}
.commentCon{
      margin-left: 0.5rem;
      color: rgba(255,255,255,0.5);
      line-height: 1.7rem;
}
.commentZan{
      width: 1.5rem;
      height: 1.5rem;
      background: url('/static/img/zan.png') no-repeat -18px center;
      background-size: auto 1.5rem
}
.commentBorder{
      margin: 0 0 10px 10px;
      border: 1px solid rgba(255,255,255,0.6);
      border-radius: 3px;
      padding: 2px 4px;
      color: rgba(255,255,255,0.6);
      font-size: 12px;
}
.appraiseMore{
      color: white;
      line-height: 3.8rem;
      text-align: center;
      font-size: 1.2rem;
}
.appraiseMoreIcon{
      background: url('/static/img/right.png') no-repeat 20.3rem center;
      background-size:auto 0.8rem;
}
/*顶部店铺评价 end*/ 

/*顶部店铺信息 begin*/ 
.forteen{
      border-bottom: 1px dashed rgba(236,236,236,0.5);
      padding: 1rem 0;
      text-align: center;
      color: white;
      font-size: 1rem;
}
.forteenImg{
      width: 2.3rem;
}
.forteenIcon{
      background: url('/static/img/right.png') no-repeat 219px center;
      background-size: 5px auto;
      margin-left: -10px;
}
.sellInfoBox{
      color: white;
      padding: 1rem 0 0.5rem 0;
      border-bottom: 1px dashed rgba(236,236,236,0.7)
}
.sellerList{
      line-height: 2rem;
      font-size: 14px;
      padding: 0.6rem 0 0.1rem 0;
}
.sellerExper{
      padding:1rem 0 1rem 0;
      color: white;
      font-size: 14px;
      border-bottom: 1px dashed rgba(236,236,236,0.7)
}
.sellerExperImg{
      width:0.8rem;
      height:1rem;
      background: url('/static/img/right.png') no-repeat center;
      background-size: 6px auto;
      float:right;
      margin-top: 2px;
}
.report{
      padding:1rem 0 1rem 0;
      color: white;
      font-size: 14px;
}
.reportPay{
      float: right;
}
/*顶部店铺信息 end*/ 
/*顶部底部固定定位部分 begin*/ 
.shopFooter{
      height: 3rem;
      text-align: center;
      padding-top:0.8rem;
      background: #f2f8f3;
      box-shadow: 0 0 9px rgba(0,0,0,0.2);
      color: #666;
      font-size: 14px;
      position: fixed;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 200;
}
.continueShop{
      display: block;
      width:1.3rem;
      height:0.8rem;
      background: url('/static/img/shoptop.png') no-repeat -15px -18px;
      background-size: 220px auto;
      margin:0 auto;
}
/*顶部底部固定定位部分 end*/ 
/*顶部商店详情end*/ 



/*首页begin*/

 /*首页搜索部分 begin*/
 .searchGoodsBox{
       width: 100%;
       background: white;
       box-sizing: border-box;
        padding: 0.8rem;
 }
.searchGoods{
      background: #F4F4F4;
      height: 30px;
      border-radius: 15px;
}
.searchPla{
      display: inline-block;
      width: 8rem;
      height: 30px;
      line-height: 30px;
      background: url('/static/img/search_bar.png') no-repeat -6px -9px;
      background-size: 4rem auto;
      padding-left:2.7rem;
      color: #999;
      font-size: 14px;
}
 /*首页搜索部分 end*/

/*首页商品展示begin*/ 

.goodsListsBox{
      margin-top: 1rem;
      position: absolute;
      width: 100%;
      top:148px;
      bottom: 3.8rem;
      overflow: hidden;  
      z-index: 2 ;
}
.leftGoodsBox{
      width: 84px;
      position:absolute;
      top: 0;
      left: 0;
      bottom:0;
      overflow-x: hidden;
      overflow-y: auto;
      z-index: 20;
      box-sizing: border-box;
      background-color: #f4f4f4;
      line-height: 3.9rem;
}
.shopListsP{
      color: #666;
      font-size: 13px;
      padding-left: 12px;
      border-right: 1px solid #e8e8e8;
      border-bottom: 1px solid #e8e8e8;
}
.shopListC{
      background: white;
      color: #666;
      padding-left: 1rem;
      border-bottom: 1px dashed #e8e8e8;
      border-right: 1px solid #e8e8e8;
}
.activeP{
      color: #47b34f;
}
.active{
      padding-left: 9px;
      box-sizing: border-box;
      background: #fff;
      color: #47b34f;
      border-left: 3px solid #47b34f;
      border-right: 1px solid white;
}
/*右侧商品展示部分*/ 
.rightGoodsBox{
      position: absolute;
      left: 84px;
      top: 0;
      right: 0;
      bottom:0;
      overflow-y: auto;
      overflow-x: hidden;
      z-index: 10;
      padding-top: 2.6rem;
      padding-bottom: 1.5rem;
      background: white;
}
.goodsTitle{
      padding-left: 1rem;
      color: #666;
      font-size: 12px;
      background-color: #f4f4f4;
      height: 2.6rem;
      line-height: 2.6rem;
      position:absolute;
      top: 0;
      left: 84px;
      right: 0;
      z-index:20;
}
.goodsBox{
      display: flex;
      padding: 1rem 1rem 1rem 0;
      margin-left: 1rem;
      border-bottom: 1px solid rgba(232,232,232,0.5);
      position: relative;
}
.goodsImg{
      width: 5.4rem;
      margin-top: 0.4rem;
}
.goodsTitle1{
      font-size: 14px;
      color: #333;
      padding-left: 5px;
      line-height: 21px;
}
.goodsTitle2{
      font-size: 11px;
      color: #999;
      padding-left: 5px;
      padding-top: 2px;
      line-height: 1.3rem;
}
.goodsSalesType{
      color: white;
      border-radius: 2px;
      font-size: 10px;
      margin-left: 5px;
      margin-top: 5px;
      text-align: center;
      width: 2.4rem;
}
.goodsSec{
      background: #FF5959;
}
.goodsRed{
      background: #FFCE0B;
}
.goodsPrice{
      display: inline-block;
      padding-left: 5px;
      padding-top:0.5rem;
      font-size: 10px;
      color: #ff3434;
}
.goodsPriceNum{
      font-size: 16px;
      margin-left: 2px;
}
.goodsPricePre{
      color:#999;
      font-size: 13px;
      text-decoration: line-through;
      margin-left: 0.5rem;
}
/*添加和减少按钮部分*/ 

.goodsOper{
      display: inline-block;
      position: absolute;
      height: 2.2rem; 
      line-height: 2.2rem;
}
.goodsAdd{
      right:1rem;
      bottom:1rem;
      width: 2.2rem;
      background: url('/static/img/add.png') no-repeat 0 center;
      background-size: auto 2.1rem;
}
.goodsReds{
      right:5.2rem;
      bottom:1rem;
      width: 2.2rem;
      background: url('/static/img/add.png') no-repeat -3rem center;
      background-size: auto 2.1rem;
}
.goodsNum{
      text-align: center;
      color: #333;
      font-size: 12px;
      right: 3.2rem;
      bottom: 1rem;
      width: 2rem;
}
/*查看更多分类*/ 
.lookOtherBox{
      text-align: center;
      line-height: 2.5rem;
      position: relative;
}
.lookOther{
      color: #999;
      background: white;
      display :inline-block;
      padding: 0 0.2rem;
      position: relative;
      z-index: 10;
}
.lookOtherBox:after{
      content: '';
      display:inline-block;
      height: 1px;
      width: 50%;
      background: #d9d9d9;
      position: absolute;
      top: 50%;
      left: 25%;
      z-index: 2;
}

/*购物车部分 begin*/ 
.cartGoodsBox{
      position: absolute;
      bottom:4rem;
      left: 0;
      right: 0;
      z-index: 300;

}
.cartBox{
      height: 4rem;
      position: fixed;
      bottom:0;
      left: 0;
      right: 0;
      z-index: 400;
      background: white;
      border-top: 1px solid #d9d9d9;
}
.cartImg{
      float: left;
      width:6rem;
      position: absolute;
      left: 0;
      bottom: 0;
      height: 3.9rem;
      background:white url('/static/img/cart.png') no-repeat center 5px;
      background-size: 50px auto;
}
.cartBadge{
      position: absolute;
      left: 3.6rem;
      top: 0.2rem;
      line-height: 15px;
      text-align: center;
      color: #fff;
      background-color: #ff5d5c;
      border-radius: 7px;
      font-size: 10px;
      padding: 0 5px;
}
.cartImg2{
      width:6rem;
      position: absolute;
      left: 0;
      bottom: 0;
      height:5rem;
      background:url('/static/img/cart.png') no-repeat center -72px;
      background-size: 50px auto;
      z-index: 401;
}
.cartText{
      position: absolute;
      left: 6rem;
      bottom: 0;
      color: #999;
      font-size: 15px;
      line-height: 3.9rem;
      background: white;
}
.cartText2{
      font-size:18px;
      color: #ff3434;
}
.cartPay{
      position:absolute;
      right:0;
      bottom: 0;
      width:10rem;
      background-color: #bebebe;
      color: white;
      line-height: 4rem;
      text-align: center;
      font-size: 14px;
}
.cartPay2{
      background-color: #47b34f;
}
/*购物车部分 end*/ 
/*首页商品展示end*/ 

/* 购物车的遮罩层部分 begin */
.cartCover{
      position: absolute;
      top: 0;
      left:0;
      bottom: 0;
      right: 0;
      background: rgba(0,0,0,0.4);
      z-index: 100;
      display: none;
}
/* 购物车的遮罩层部分 end */

/*快捷导航 begin*/
.quickNavBox{
      position: fixed;
      z-index: 1000;
      right: 0;
      bottom: 60px;
      width: 36px;
      height: 36px;
      background: rgba(0,0,0,0.8) url('/static/img/bm.png') 7px 7px no-repeat;
      background-size: 65px 20px;
      border: 1px solid #757575;
      border-radius: 4px 0 0 4px; 
}
.quickNavList{
      position:absolute;
      width: 95px;
      right: -1px;
      bottom: 42px;
      border: 1px solid #757575;
}
.navItem{
      display: block;
      background: rgba(0,0,0,0.8) url('/static/img/bmenu.png') no-repeat;
      background-size: 16px auto;
      color: white;
      line-height: 35px;
      border-bottom: 1px solid #4b4b4b;
      padding-left:37px;
      font-size:14px;
}
.navIc{
      display:block;
      width: 0;
      height: 0;
      border-width: 6px;
      border-color: rgba(0,0,0,0.8) transparent transparent transparent;
      border-style: solid;
      position: absolute;
      bottom: -12px;
      right: 10px;
}
.nav1{
      background-position: 10px -50px
}
.nav2{
      background-position: 10px -100px
}
.nav3{
      background-position: 10px -150px
}
.nav4{
      background-position: 10px -200px
}
.nav5{
      background-position: 10px -250px
}
.bottom{
      bottom: 115px;
}
/*快捷导航 end*/

.displayNone{
      display: none;
}
.lineRemove{
      border-bottom: none;
}

</style>

